<div class="main-content">
	<div class="main-content-inner">
		<div class="breadcrumbs" id="breadcrumbs">
			<ul class="breadcrumb">
				<li><i class="ace-icon fa fa-home home-icon"></i> <a href="">首页</a></li>
				<li class="active">报废设备</li>
			</ul>
		</div>
		<!--内容部分 -->
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="clearfix"></div>
					<div>
						<div id="dynamic-table_wrapper"
							class="dataTables_wrapper form-inline no-footer">
							<div class="row" style="height: 50px;">
									<div class="col-xs-5">
										<a style="cursor: pointer;" onclick="downloadScrapItemsWord();">报废设备统计表下载</a>
									</div>
									<div class="nav-search col-xs-7" >
										<span class="input-icon" style="float: right;">
											<button onclick="getScrapItemsInfo(1);" type="button"  class="btn btn-info btn-sm" style="float: right;">
											查询
											</button>
										</span>
										<span class="input-icon" style="float: right;"> <input
											style="float: left;" type="text" placeholder="关键字查询 "
											class="nav-search-input" onkeyup="getScrapItemsInfo(1)"
											id="search_input" autocomplete="off"> <i
											class="ace-icon fa fa-search nav-search-icon"></i>
										</span>
										<span class="input-icon" style="float: right;"> 
											<input class="nav-search-input" placeholder="截止日期"
													id="LAY_demorange_e" >
										</span>
										<span class="input-icon" style="float: right;"> 
											<input class="nav-search-input" placeholder="开始日期"
													id="LAY_demorange_s" >
										</span>
								  </div>
							</div>
							<table
								class="table table-striped table-bordered table-hover dataTable no-footer DTTT_selectable"
								id="dynamic-table" role="grid"
								aria-describedby="dynamic-table_info">
								<thead>
									<tr>
										<th class="col-xs-1">设备编号</th>
										<th class="col-xs-1">设备名称</th>
										<th class="col-xs-1">类别</th>
										<th class="col-xs-1">型号</th>
										<th class="col-xs-1">经办人</th>
										<th class="col-xs-1">
											状态
											<select name="interest" onchange="getScrapItemsInfo(1);" id="status_select" lay-filter="aihao">
												<option value="1">已报废</option>
												<option value="0">待审核</option>
												<option value="-1">驳回</option>
											</select>
										</th>
										<th class="col-xs-1">报废日期</th>
										<th class="col-xs-2">操作</th>
									</tr>
								</thead>
								<tbody id="itemsPage">
								</tbody>
							</table>
							<!-- 分页 -->
							<hr>
							<div id="page5" style="float: right;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 详情修改弹框 -->
<div id="toScrapItemContent" hidden="hidden" >
	<form id="toScrapItemform" action="#" method="post">
		<input id="items_id" name="items.id" type="text" hidden="hidden">
		<input id="scrapItems_id" name="scrap_items.id" type="text" hidden="hidden">
		<div class="col-xs-12">&nbsp;</div>
		<div class="col-xs-12">
			<div class="col-xs-12">
				<label class="col-sm-2 control-label no-padding-right"
					for="form-field-1">设备编码</label>
				<div class="col-sm-10" style="float: left">
					<input id="items_code" type="text" class="form-control" readonly="readonly" />
				</div>
			</div>
			<div class="col-xs-12">&nbsp;</div>
			<div class="col-xs-12">
				<label class="col-sm-2 control-label no-padding-right"
					for="form-field-1">设备名称</label>
				<div class="col-sm-10" style="float: left">
					<input id="items_name" name="items.name" type="text" class="form-control" placeholder="必填" maxlength="30" />
				</div>
			</div>
			<div class="col-xs-12">&nbsp;</div>
			<div class="col-xs-12">
				<label class="col-sm-2 control-label no-padding-right"
					for="form-field-1">设备类别</label>
				<div class="col-sm-10" style="float: left">
					<input id="items_type" name="items.type" type="text" class="form-control" placeholder="必填" maxlength="30" />
				</div>
			</div>
			<div class="col-xs-12">&nbsp;</div>
			<div class="col-xs-12">
				<label class="col-sm-2 control-label no-padding-right"
					for="form-field-1">设备型号</label>
				<div class="col-sm-10" style="float: left">
					<input id="items_modelNum" name="items.modelNum" type="text" class="form-control" placeholder="必填" maxlength="30"/>
				</div>
			</div>
			<div class="col-xs-12">&nbsp;</div>
			<div class="col-xs-12">
				<label class="col-sm-2 control-label no-padding-right"
					for="form-field-1">规格</label>
				<div class="col-sm-10" style="float: left">
					<input id="items_norms" name="items.norms" type="text" class="form-control" placeholder="必填" maxlength="30"/>
				</div>
			</div>
			<div class="col-xs-12">&nbsp;</div>
			<div class="col-xs-12">
				<label class="col-sm-2 control-label no-padding-right"
					for="form-field-1">报废日期</label>
				<div class="col-sm-10 layui-inline" style="float: left">
					<input id="scrapItems_scrapDate" name="scrap_items.scrapDate" class="layui-input " placeholder="选择日期（必填）"  
					onclick="layui.laydate({elem: this, festival: true})">
				</div>
			</div>
			<div class="col-xs-12">&nbsp;</div>
			<div class="col-xs-12">
				<label class="col-sm-2 control-label no-padding-right"
					for="form-field-1">经办人</label>
				<div class="col-sm-10" style="float: left">
					<input id="scrapItems_userName" type="text" class="form-control" name="scrap_items.userName" placeholder="必填" maxlength="10"/>
				</div>
			</div>
			<div class="col-xs-12">&nbsp;</div>
			<div class="col-xs-12">
				<label class="col-sm-2 control-label no-padding-right"
					for="form-field-1">备注</label>
				<div class="col-sm-10" style="float: left">
					<textarea id="scrapItems_remark" class="form-control" name="scrap_items.remark" placeholder="选填" maxlength="50"></textarea>
				</div>
			</div>
			<div class="col-xs-12">&nbsp;</div>
		</div>
	</form>
</div>
<!-- 报废设备信息查看 -->
<script type="text/javascript">

getScrapItemsInfo(1); // 初始加载数据

/**
 * 获取待修设备信息
 */
function getScrapItemsInfo(curr) {
	var sTime = $("#LAY_demorange_s").val(); // 获取起始时间 
	var eTime = $("#LAY_demorange_e").val(); // 获取终止时间
	var search = $("#search_input").val();  // 获取搜索框中信息
	var status = $("#status_select").val(); // 获取设备状态
	
	var getUrl = "scrap/getScrapItemsInfo";  // 待修设备接口
	var data = {      // 所需参数
			"curr":curr,
			"size":10,
			"search":search,
			"sTime":sTime,
			"eTime":eTime,
			"status":status
		};
	$.post(getUrl, data, function(resp) {
		pack(resp.list,curr);  // 填充表格数据
		laypage({  // 调用分页
			cont : $('#page5'), // 分页容器。
			pages : resp.totalPage, // 总页数
			skin : '#2283C5',//保持ace中间的样式
			first : 1,
			last : resp.totalPage, //总页数，将尾页显示为总页数
			curr : resp.pageNumber,//当前页
			groups : 5, //连续显示分页数
			jump : function(obj, first) {
				if (!first) { //一定要加此判断，否则初始时会无限刷新
					getScrapItemsInfo(obj.curr);
				}
			}
		});
	});
}
function pack(data,curr) { // 填充表格数据
	var dataStr = "";
	$.each(data, function(i, v) {
		dataStr += packlist(v,curr);
	});
	$("#itemsPage").html(dataStr);
}
function packlist(v,curr) { 
	var dataStr = "";
	dataStr += '<tr>';
	dataStr += '<td>' + v.code + '</td>';
	dataStr += '<td>' + v.name + '</td>';
	dataStr += '<td>' + v.type + '</td>';
	dataStr += '<td>' + v.modelNum + '</td>';
	dataStr += '<td>' + v.userName + '</td>';
	if(v.scrap_status==0){
		dataStr += '<td>待审核</td>';
	}else if(v.scrap_status==1){
		dataStr += '<td>已报废</td>';
	}else{
		dataStr += '<td>驳回</td>';
	}
	dataStr += '<td>' + v.scrapDate + '</td>';
	dataStr += '<td> <div class="hidden-sm hidden-xs action-buttons">';
	dataStr += '<button class="layui-btn layui-btn-small" onclick="updateItemInfo('
		+ v.items_id + "," + curr + ')">详情/修改</button> ';
	dataStr += '<button class="layui-btn layui-btn-danger layui-btn-small"  onclick="delItemInfo('
		+ v.items_id + "," + curr + ')">删除</button>';
	dataStr += '</div> </td>';
	
	dataStr += '</tr>';
	return dataStr;
};

/**
 * 修改报废信息
 */
function updateItemInfo(itemsId,curr){
	$("#toScrapItemform input").val(""); // 清空文本框数据
	$("#toScrapItemform textarea").val(""); // 清空文本框数据
	// 填充弹框信息
	$.post("scrap/getScrapItemInfo", {"itemsId":itemsId}, function(resp) {
		$("#items_id").val(resp.items_id);
		$("#items_code").val(resp.code);
		$("#items_name").val(resp.name);
		$("#items_type").val(resp.type);
		$("#items_modelNum").val(resp.modelNum);
		$("#items_norms").val(resp.norms);
		$("#scrapItems_id").val(resp.scrap_id);
		$("#scrapItems_scrapDate").val(resp.scrapDate);
		$("#scrapItems_userName").val(resp.userName); 
		$("#scrapItems_remark").val(resp.remark);
	});
	
	layer.open({
		type : 1,
		shade : [ 0.5 ],
		title : '修改报废设备信息', 
		area : [ '35%', '450px' ], //显示空间
		content : $('#toScrapItemContent'), //捕获的元素
		btn : [ '确定', '取消' ],
		yes : function(index, layero) { 
			// validator验证
			$("#toScrapItemform").submit();
			if(!scrap_validator.form()){
				return false;
			}
			
			$.post("scrap/updateItemInfo", $("#toScrapItemform").serialize(), function(resp) {
				if(resp=="success"){
					getScrapItemsInfo(curr);
					layer.msg("修改成功");
				}else{
					layer.msg("修改失败");
				}
				layer.close(index);
			});
		},
		cancel : function(index) {
			layer.close(index);
			layer.msg("取消");
		}, 
	});
}

/**
 * 删除设备信息
 */
 function delItemInfo(itemsId,curr){
	layer.confirm("你确定删除吗？",{ btn:['确定','取消']}, function(){ 
		$.post("repair/delItemInfo", {"itemsId":itemsId}, function(resp) {
			if(resp=="success"){
				getScrapItemsInfo(curr); // 刷新数据
				layer.msg("删除成功");
			}else{
				layer.msg("删除失败");
			}
		});	
	},function(){ 
		layer.msg("取消");
	});
}

 /**
  * 报废设备统计表下载
  */
 function downloadScrapItemsWord() {
	var sTime = $("#LAY_demorange_s").val(); // 获取起始时间 
	var eTime = $("#LAY_demorange_e").val(); // 获取终止时间
	var search = $("#search_input").val();  // 获取搜索框中信息
	var status = $("#status_select").val(); // 获取设备状态
 	
 	var data = "search="+search+"&sTime="+sTime+"&eTime="+eTime+"&status="+status;
 	window.location.href="scrap/downloadExcel?"+data;
 }
</script>
<!-- 表单验证 -->
<script type="text/javascript">
/* 报废表单验证 */
var scrap_validator = $("#toScrapItemform").validate({
	  submitHandler:function(form) {
			console.log("提交表单");
		},
	  errorPlacement: function(error, element) {
		  layer.msg(error[0].innerText);
	 	},
	 	onkeyup:false, // 敲键盘是不验证
		rules : {
			"items.name" : {
				required : true,
				maxlength : "30",
			},
			"items.type" : {
				required : true,
				maxlength : "30",
			},
			"items.modelNum" : {
				required : true,
				maxlength : "30",
			},
			"items.norms" : {
				required : true,
				maxlength : "30",
			},
			"scrap_items.scrapDate" : {
				required : true,
			},
			"scrap_items.userName" : {
				required : true,
				maxlength : "20",
			},
			"scrap_items.remark" : {
				maxlength : "50",
			},
		},
		messages : {
			"items.name" : {
				required : "请填写设备名称",
				maxlength : "长度不能超过30字符",
			},
			"items.type" : {
				required : "请填写设备类别",
				maxlength : "长度不能超过30字符",
			},
			"items.modelNum" : {
				required : "请填写设备型号",
				maxlength : "长度不能超过30字符",
			},
			"items.norms" : {
				required : "请填写设备规格",
				maxlength : "长度不能超过30字符",
			},
			"scrap_items.scrapDate" : {
				required : "请选择日期",
			},
			"scrap_items.userName" : {
				required : "请填写经办人姓名",
				maxlength : "长度不能超过20字符",
			},
			"scrap_items.remark" : {
				maxlength : "长度不能超过50字符",
			},
		}
	});
</script>
<!-- 日期选择器 -->
<script type="text/javascript">
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  var start = {
    min: '1900-01-01 23:59:59'//laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      end.min = datas; //开始日选好后，重置结束日的最小日期
      end.start = datas //将结束日的初始值设定为开始日
    }
  };
  
  var end = {
    min: '1900-01-01 23:59:59'//laydate.now()
    ,max: '2099-06-16 23:59:59'
    ,istoday: false
    ,choose: function(datas){
      start.max = datas; //结束日选好后，重置开始日的最大日期
    }
  };
  
   document.getElementById('LAY_demorange_s').onclick = function(){
    start.elem = this;
    laydate(start);
  }
  document.getElementById('LAY_demorange_e').onclick = function(){
    end.elem = this
    laydate(end);
  } 
  
});
</script>